<template>
  <div id="app" class="meeting-container">
    <MeetingHeader 
      :meeting-info="meetingInfo"
      @invite-member="inviteMember"
    />
    
    <div class="meeting-main">
      <VideoArea 
        :members="members"
        :current-user="currentUser"
        @toggle-member-audio="toggleMemberAudio"
      />
      
      <SidePanel 
        :active-tab="activeTab"
        :members="members"
        :messages="messages"
        :current-user="currentUser"
        :is-mobile="isMobile"
        :show-side-panel="showSidePanel"
        @tab-change="activeTab = $event"
        @send-message="sendMessage"
        @close-panel="showSidePanel = false"
      />
    </div>
    
    <MeetingFooter 
      :current-user="currentUser"
      :is-screen-sharing="isScreenSharing"
      :is-recording="isRecording"
      :is-mobile="isMobile"
      @toggle-audio="toggleAudio"
      @toggle-video="toggleVideo"
      @toggle-screen-share="toggleScreenShare"
      @toggle-recording="toggleRecording"
      @leave-meeting="leaveMeeting"
      @switch-tab="handleTabSwitch"
    />
    
    <!-- 移动端侧边栏遮罩 -->
    <div 
      v-if="isMobile && showSidePanel" 
      class="mobile-panel-overlay"
      @click="showSidePanel = false"
    ></div>
  </div>
</template>

<script>
import MeetingHeader from './components/MeetingHeader.vue'
import VideoArea from './components/VideoArea.vue'
import SidePanel from './components/SidePanel.vue'
import MeetingFooter from './components/MeetingFooter.vue'

export default {
  name: 'App',
  components: {
    MeetingHeader,
    VideoArea,
    SidePanel,
    MeetingFooter
  },
  data() {
    return {
      meetingInfo: {
        title: '产品需求讨论会',
        time: '14:30 - 15:30'
      },
      members: [],
      currentUser: {
        id: 1,
        name: '张三',
        audioEnabled: true,
        videoEnabled: true
      },
      activeTab: 'members',
      messages: [],
      isScreenSharing: false,
      isRecording: false,
      colors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#9c27b0', '#673ab7'],
      isMobile: false,
      showSidePanel: false
    }
  },
  methods: {
    // 获取用户姓名的首字母
    getInitials(name) {
      return name.charAt(0);
    },
    
    // 根据用户名获取头像颜色
    getAvatarColor(name) {
      let hash = 0;
      for (let i = 0; i < name.length; i++) {
        hash = name.charCodeAt(i) + ((hash << 5) - hash);
      }
      return this.colors[Math.abs(hash) % this.colors.length];
    },
    
    // 切换麦克风状态
    toggleAudio() {
      this.currentUser.audioEnabled = !this.currentUser.audioEnabled;
      // 更新当前用户在成员列表中的状态
      const userIndex = this.members.findIndex(m => m.id === this.currentUser.id);
      if (userIndex !== -1) {
        this.members[userIndex].audioEnabled = this.currentUser.audioEnabled;
      }
    },
    
    // 切换摄像头状态
    toggleVideo() {
      this.currentUser.videoEnabled = !this.currentUser.videoEnabled;
      // 更新当前用户在成员列表中的状态
      const userIndex = this.members.findIndex(m => m.id === this.currentUser.id);
      if (userIndex !== -1) {
        this.members[userIndex].videoEnabled = this.currentUser.videoEnabled;
      }
    },
    
    // 切换成员音频状态
    toggleMemberAudio(memberId) {
      const member = this.members.find(m => m.id === memberId);
      if (member) {
        member.audioEnabled = !member.audioEnabled;
      }
    },
    
    // 发送消息
    sendMessage(message) {
      this.messages.push({
        id: Date.now(),
        sender: this.currentUser.name,
        content: message
      });
    },
    
    // 切换屏幕共享
    toggleScreenShare() {
      this.isScreenSharing = !this.isScreenSharing;
      this.$message({
        message: this.isScreenSharing ? '开始共享屏幕' : '停止共享屏幕',
        type: 'success'
      });
    },
    
    // 切换录制状态
    toggleRecording() {
      this.isRecording = !this.isRecording;
      this.$message({
        message: this.isRecording ? '开始录制会议' : '停止录制会议',
        type: 'success'
      });
    },
    
    // 邀请成员
    inviteMember() {
      this.$prompt('请输入要邀请的成员姓名', '邀请成员', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S+/,
        inputErrorMessage: '请输入成员姓名'
      }).then(({ value }) => {
        const newMember = {
          id: Date.now(),
          name: value,
          audioEnabled: true,
          videoEnabled: true
        };
        this.members.push(newMember);
        this.$message({
          type: 'success',
          message: `已邀请 ${value} 加入会议`
        });
      }).catch(() => {
        // 取消操作
      });
    },
    
    // 离开会议
    leaveMeeting() {
      this.$confirm('确定要离开会议吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已离开会议'
        });
        // 在实际应用中，这里会执行离开会议的逻辑
      }).catch(() => {
        // 取消操作
      });
    },
    
    // 处理标签切换
    handleTabSwitch(tab) {
      this.activeTab = tab;
      if (this.isMobile) {
        this.showSidePanel = true;
      }
    },
    
    // 检查是否为移动设备
    checkIsMobile() {
      this.isMobile = window.innerWidth <= 768;
    },
    
    // 模拟从API获取数据
    fetchMembers() {
      // 模拟API调用
      setTimeout(() => {
        this.members = [
          { id: 1, name: '张三', audioEnabled: true, videoEnabled: true },
          { id: 2, name: '李四', audioEnabled: true, videoEnabled: true },
          { id: 3, name: '王五', audioEnabled: false, videoEnabled: true },
          { id: 4, name: '赵六', audioEnabled: true, videoEnabled: false },
          { id: 5, name: '钱七', audioEnabled: true, videoEnabled: true },
          { id: 6, name: '孙八', audioEnabled: true, videoEnabled: true }
        ];
      }, 500);
    },
    
    // 模拟从API获取消息
    fetchMessages() {
      // 模拟API调用
      setTimeout(() => {
        this.messages = [
          { id: 1, sender: '李四', content: '大家能听到我说话吗？' },
          { id: 2, sender: '张三', content: '可以听到，很清楚' },
          { id: 3, sender: '王五', content: '我这边网络有点卡' },
          { id: 4, sender: '赵六', content: '我们可以开始讨论产品需求了吗？' }
        ];
      }, 800);
    }
  },
  mounted() {
    // 组件挂载后获取数据
    this.fetchMembers();
    this.fetchMessages();
    
    // 检查设备类型
    this.checkIsMobile();
    window.addEventListener('resize', this.checkIsMobile);
    
    // 模拟实时接收消息
    setInterval(() => {
      if (this.messages.length > 0 && Math.random() > 0.7) {
        const senders = ['李四', '王五', '赵六', '钱七', '孙八'];
        const contents = [
          '我同意这个方案',
          '这个功能实现起来有难度',
          '我们需要更多时间',
          '用户反馈怎么样？',
          '这个设计很棒',
          '我们什么时候可以上线？'
        ];
        
        const randomSender = senders[Math.floor(Math.random() * senders.length)];
        const randomContent = contents[Math.floor(Math.random() * contents.length)];
        
        this.messages.push({
          id: Date.now(),
          sender: randomSender,
          content: randomContent
        });
      }
    }, 10000);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkIsMobile);
  }
}
</script>

<style>
@import './styles/main.css';
</style>